<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:m="http://jdevelopment.nl">
<f:metadata>
	<f:viewParam name="message" value="#{messageBacking.currentMessage}" converter="#{messageConvertor}" />
</f:metadata>
<h:head>
	<title>Localstorage demo</title>
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/message.js"></script>
	<link href="css/bootstrap.css" rel="stylesheet" />
</h:head>

<h:body>
	<h:form>
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a href="#" class="brand">Localstorage cache demo</a>
					<div class="nav-collapse">
						<ul class="nav">
							<li class="active"><h:commandLink value="Fill database"
									action="#{messageBacking.fillTable()}" /></li>
							<li><a href="javascript:localStorage.clear();">Clear
									localStorage</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</h:form>

	<div style="clear: both; padding-top: 50px;"></div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<h:panelGroup layout="block" class="well" id="messageTarget"
					binding="#{components['message']}">
					<c:if test="#{empty messageBacking.currentMessage}">
			Click on a message below to start
			</c:if>
					<c:if test="#{!empty messageBacking.currentMessage}">
						<pre>#{messageBacking.currentMessage.message}</pre>
					</c:if>
				</h:panelGroup>

				<script>
				$(function () {
					message.setTargetDiv("[id='#{components['message'].clientId}']");
				});
				</script>


				<div class="well">
					<h:dataTable var="message" value="#{messageBacking.messages}"
						styleClass="table table-striped table-bordered">
						<h:column>
							<f:facet name="header">ID</f:facet>
							<a href="javascript:message.showMessage(#{message.id});">
								#{message.id}</a>
						</h:column>
						<h:column>
							<f:facet name="header">From</f:facet>
				   			#{message.fromName}
				   		</h:column>

					</h:dataTable>
				</div>
			</div>
		</div>
	</div>
</h:body>
</html>